<template>
	<view class="container">
		<tui-loading v-show="!pageData.loading"></tui-loading>
		<view class="page" v-show="pageData.loading" :style="{ marginTop: header.init.height + 'px' }">
			<!--header-->
			<tui-navigation-bar @init="initNavigation" @change="changeNavigation" :title="header.title"
				:color="tui.getColorSite().title.color" :backgroundColor="tui.getColorSite().title.backgroundColor"
				:splitLine="header.splitLine" :isOpacity="header.isOpacity" :maxOpacity="header.maxOpacity"
				:transparent="header.transparent" :scrollTop="header.scrollTop" :scrollRatio="header.scrollRatio"
				:isCustom="header.isCustom" :isImmersive="header.isImmersive" :isFixed="header.isFixed"
				:backdropFilter="header.backdropFilter" :dropDownHide="header.dropDownHide" :zIndex="header.zIndex">
				<view class="tui-header-icon" :style="{ top: header.init.top + 'px' }">
					<tui-icon name="arrowleft" :color="tui.getColorSite().title.color" @click="back"></tui-icon>
				</view>
			</tui-navigation-bar>
			<!--header-->
			<view class="goodsInfo">
				<!--banner-->
				<view class="tui-banner-swiper" v-if="info.banner" style="position: relative;">
					<swiper class="tui-banner-box" :autoplay="true" :interval="5000" :duration="150" :circular="true"
						:style="{ height: header.init.scrollH + 'px' }" @change="bannerChange">
						<swiper-item v-for="(item, index) in info.banner.data" :key="index" :data-index="index"
							@tap.stop="previewImage" class="tui-banner-item">
							<image :src="item" class="tui-slide-image" :style="{ height: header.init.scrollH + 'px' }">
							</image>
						</swiper-item>
					</swiper>
					<view class="tui-banner-tag">
						<tui-tag padding="12rpx 18rpx" type="translucent" shape="circleLeft" :scaleMultiple="0.82"
							originRight>{{ info.banner.index + 1 }}/{{ info.banner.data.length }}</tui-tag>
					</view>
				</view>
				<!--banner-->
				<view class="tui-pro-detail">
					<view class="tui-product-title">
						<view class="tui-pro-pricebox tui-padding">
							<view class="tui-pro-price">
								<view>
									<text>￥</text>
									<text class="tui-price">{{ info.current_price }}</text>
									<text>≈</text>
									<text>{{info.current_price / pageData.integral2u_species}}U</text>
								</view>
							</view>
							<!-- <view class="tui-collection tui-size-24" @click="detail('like', info)">
								<tui-icon :name="info.is_like ? 'like-fill' : 'like'" :color="info.is_like ? '#ff201f' : '#333'" :size="20"></tui-icon>
								<view class="tui-scale-collection" :class="{ 'tui-icon-red': info.is_like }">收藏</view>
							</view> -->
						</view>
						<view class="tui-original-price tui-gray">
							价格
							<text class="tui-line-through">￥{{ info.market_price }}</text>
						</view>
						<view class="tui-pro-titbox">
							<view class="tui-pro-title">
								{{ info.title }}
							</view>
						</view>
						<view class="tui-padding">
							<view class="tui-sale-info tui-size-24 tui-gray">
								<view></view>
								<view></view>
								<view>销量：{{ info.sales_num_count }}</view>
							</view>
						</view>
					</view>
					<view class="tui-nomore-box">
						<tui-nomore text="宝贝详情" backgroundColor="#FFFFFF"></tui-nomore>
					</view>
					<view class="tui-product-img">
						<u-parse :content="info.content" :lazyLoad="parse.lazyLoad" :tagStyle="parse.style"
							:previewImg="parse.previewImg"></u-parse>
					</view>
					<tui-nomore text="已经到最底了" backgroundColor="#FFFFFF"></tui-nomore>
					<view class="tui-safearea-bottom"></view>
				</view>
				<view class="tui-operation">
					<tui-button height="68rpx" :size="26" :type="tui.getColorSite().button.type" shape="circle"
						@click="detail('nowBuy')">立即购买</tui-button>
				</view>
			</view>

			<tui-bottom-popup :show="popup.status" @close="popupClose">
				<view class="tui-popup-box">
					<view class="tui-product-box tui-padding">
						<image v-if="info.thumb" :src="info.thumb.url" class="tui-popup-img"></image>
						<view class="tui-popup-price">
							<view class="tui-amount tui-bold">
								<text>￥{{info.current_price}}</text>
								<text>≈</text>
								<text>{{info.current_price / pageData.integral2u_species}}U</text>
							</view>
							<view class="tui-number">原价:{{info.market_price}}</view>
						</view>
					</view>
					<view class="tui-popup-scroll">
						<view class="tui-scrollview-box">
							<view class="tui-number-box tui-bold tui-attr-title"
								style="display: flex;justify-content: flex-end;">
								<view class="tui-attr-title">数量</view>
								<tui-numberbox :max="99" :min="1" :value="param.num"
									@change="changeNumber"></tui-numberbox>
							</view>
						</view>
					</view>
					<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
						<view class="tui-flex-1">
							<tui-button height="72rpx" :size="28" type="danger" shape="circle"
								@click="detail('addCart')">加入购物车</tui-button>
						</view>
						<view class="tui-flex-1">
							<tui-button height="72rpx" :size="28" type="warning" shape="circle"
								@click="detail('nowBuy')">立即购买</tui-button>
						</view>
					</view>
					<view class="tui-right">
						<tui-icon name="close-fill" color="#999" :size="20" @click="popupClose"></tui-icon>
					</view>
				</view>
			</tui-bottom-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				get: {},
				header: {
					title: '测试首页', //NavigationBar标题
					splitLine: true, //是否需要分割线
					isOpacity: false, //是否设置不透明度
					maxOpacity: 1, //不透明度最大值 0-1
					transparent: false, //背景透明 （设置该属性，则背景透明，只出现内容，isOpacity和maxOpacity失效）
					scrollTop: 0, //滚动条滚动距离
					scrollRatio: 0.3, //isOpacity 为true时生效（opacity=scrollTop /windowWidth * scrollRatio）
					isCustom: false, //是否自定义NavigationBar内容
					isImmersive: true, //是否沉浸式,
					isFixed: true, //是否固定
					backdropFilter: false, //是否开启高斯模糊效果[仅在支持的浏览器有效果]，为true时maxOpacity设置小于1的值
					dropDownHide: false, //下拉隐藏NavigationBar，主要针对有回弹效果ios端
					zIndex: 9998, //z-index值
					init: {
						width: 0,
						height: 0,
						left: 0,
						top: 0,
						top: 0,
						scrollH: 0,
					},
				},
				pageData: {
					loading: false,
					integral2u_species: 0,
				},
				info: {},
				popup: {
					status: false,
					data: {},
				},
				param: {
					obj_id: 0,
					num: 1,
					sku: '',
				},
				parse: {
					lazyLoad: true,
					style: {},
					previewImg: false,
				},
				param: {
					obj_id: 0,
					num: 1,
					sku: '',
				},
				xhrUrl: '/goods',
				appInit: {},
				user: {},
			}
		},
		// 监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
		onLoad(e) {
			let that = this;
			// uni.startPullDownRefresh();
			console.log("self:onLoad++++++++++++++++++++++++++++++++++++++++++++++++++");
			uni.stopPullDownRefresh(); //停止当前页面下拉刷新
			if (typeof(e.scene) != 'undefined') {
				e = that.tui.getUrlkey(decodeURIComponent(e.scene));
			}
			that.get = e;
			if (typeof that.get.title !== 'undefined') {
				that.header.title = that.get.title;
				if (that.header.title.length > 13) {
					that.header.title = that.header.title.slice(0, 13) + '...';
				}
				that.$forceUpdate();
			}
			console.log("self:getData=>", that.get);
			let obj = {};
			uni.getSystemInfo({
				success: function(res) {
					that.header.init.width = obj.left || res.windowWidth;
					that.header.init.height = obj.top ? obj.top + obj.height + 8 : res.statusBarHeight + 44;
					that.header.init.top = obj.top ? obj.top + (obj.height - 32) / 2 : res.statusBarHeight + 6;
					that.header.init.scrollH = res.windowWidth * 0.6;
					that.header.init.scrollH = res.windowWidth * 1;
				}
			});
			that.$forceUpdate();
			that.initialize();
		},
		// 监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
		onShow() {
			let that = this;
		},
		// 监听页面滚动，参数为Object
		onPageScroll(e) {
			let that = this;
			that.header.scrollTop = e.scrollTop;
			that.$forceUpdate();
		},
		methods: {
			initialize() {
				let that = this;
				let Int = setInterval(function() {
					that.user = that.tui.getCache("user");
					console.log('self:user=>', that.user);
					if (typeof(that.user) == 'object') {
						clearInterval(Int);
						that.__init();
					}
				}, 800);
			},
			async __init() {
				let that = this;
				that.appInit = that.tui.getCache("appInit");
				that.pageData.integral2u_species = that.tui.str2arr(that.appInit.integral2u_species, ':')[1];
				console.log('self:appInit=>', that.appInit);
				let response = await that.tui.get(that.xhrUrl, {
					id: that.get.id,
				});
				that.info = response.data;
				let goodsBanner = {
					index: 0,
					data: [],
				};
				that.info.images.forEach(function(v, k) {
					goodsBanner.data.push(v.url);
				});
				that.info.banner = goodsBanner;
				that.param.obj_id = that.info.id;
				that.parse.style = {
					p: 'font-size:0',
					img: 'width:100%',
				};
				console.log(that.info);

				that.pageData.loading = true;
				that.$forceUpdate();
			},
			async detail(type, item = {}) {
				let that = this;
				switch (type) {
					case 'addCart':
						if (that.popup.status == false) {
							that.popup.status = true;
						} else {
							if (that.info.is_buy === 0) {
								that.tui.toast("暂时无法购买~", 'none', function() {}, 1500);
							} else {
								let addCart = await that.tui.post('/goods', that.param, {
									cart: that.tui.formatDate().timestamp,
								});
								setTimeout(function() {
									that.popupClose();
								}, 1500);
								that.tui.toast(addCart.info, 'none', function() {}, 1500);
							}
						}
						break;
					case 'nowBuy':
						if (that.popup.status == false) {
							that.popup.status = true;
						} else {
							if (that.info.is_buy === 0) {
								that.tui.toast("暂时无法购买~", false, function() {}, 1500);
							} else {
								that.tui.setCache('goodsBuyCache', {
									type: 'buy',
									data: that.param,
									info: that.info,
								}, function() {
									that.tui.urlHref('/pages/index-confirm?' + that.tui.initParamsData({
										title: '商城下单',
									}));
								});
							}
						}
						break;
					default:
						console.log(that.get.tpl, type, item);
						break;
				}
			},
			changeNumber(e) {
				let that = this;
				that.param.num = e.value;
				that.$forceUpdate();
			},
			popupClose() {
				let that = this;
				that.popup.data = [];
				that.popup.status = false;
				switch (that.get.tpl) {
					case 'goodsInfo':
						break;
					default:
						break;
				}
				that.$forceUpdate();
			},
			bannerChange(e) {
				let that = this;
				that.info.banner.index = e.detail.current;
				switch (that.get.tpl) {
					case 'ticketMy':
						that.info.orderSn = that.info.data[that.info.banner.index].obj_data.orderSn;
						that.info.content = that.info.data[that.info.banner.index].content;
						break;
				}
				that.$forceUpdate();
			},
			previewImage: function(e) {
				let that = this;
				return;
				uni.previewImage({
					current: e.currentTarget.dataset.index,
					urls: that.info.banner.data,
					loop: true,
				});
				that.$forceUpdate();
			},
			initNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.header.top = e.top;
				that.$forceUpdate();
			},
			changeNavigation(e) {
				let that = this;
				that.header.opacity = e.opacity;
				that.$forceUpdate();
			},
			back() {
				let that = this;
				that.tui.urlBack(1);
			},
		},
		// 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
		onReachBottom() {
			let that = this;
		},
		// 监听页面隐藏
		onHide() {
			let that = this;
		},
		// 监听页面卸载
		onUnload() {
			let that = this;
		},
		// 页面返回
		onBackPress() {
			let that = this;
		},
		// #ifdef MP
		onShareAppMessage() {
			// console.log('分享!')
		},
		// #endif
	}
</script>

<style scoped lang="scss">
	.goodsInfo {
		.tui-pro-detail {
			box-sizing: border-box;
			padding-bottom: 100rpx;
			color: #333;

			.tui-product-title {
				background: #fff;
				padding: 20rpx 20rpx;
				border-bottom-left-radius: 24rpx;
				border-bottom-right-radius: 24rpx;
				overflow: hidden;

				.tui-pro-pricebox {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #ff201f;
					font-size: 36rpx;
					font-weight: bold;
					line-height: 44rpx;

					.tui-pro-price {
						display: flex;
						align-items: center;

						.tui-price {
							font-size: 58rpx;
						}
					}

					.tui-collection {
						color: #333;
						display: flex;
						align-items: center;
						flex-direction: column;
						justify-content: center;
						height: 44rpx;

						.tui-scale-collection {
							transform: scale(0.7);
							transform-origin: center 90%;
							line-height: 24rpx;
							font-weight: normal;
							margin-top: 4rpx;
						}
					}
				}

				.tui-original-price {
					font-size: 26rpx;
					line-height: 26rpx;
					padding: 10rpx 0;
					box-sizing: border-box;

					.tui-line-through {
						text-decoration: line-through;
					}
				}

				.tui-pro-titbox {
					font-size: 32rpx;
					font-weight: 500;
					position: relative;
					box-sizing: border-box;

					.tui-pro-title {
						padding-top: 20rpx;
					}
				}

				.tui-sale-info {
					clear: both;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-top: 30rpx;
				}
			}

			.tui-product-img {
				display: flex;
				flex-direction: column;
				transform: translateZ(0);
			}
		}

	}
</style>